@import '../../../utils.less';

.ui-account-thirdparty-page {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding: 30px;
  background-color: @bg-2;

  ul,
  li {
    list-style: none;
  }

  &-wrapper {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }

  &-subtitle {
    display: flex;
    align-items: center;
    margin-bottom: 50px;

    &::before {
      display: inline-flex;
      width: 6px;
      height: 14px;
      margin-right: 6px;
      background-color: @primary-color;
      content: '';
    }

    h5 {
      font-size: 14px;
    }

    span {
      font-size: 12px;
    }
  }

  &-content {
    display: flex;
    flex: 1 0 auto;

    .third-party-list-wrapper,
    .form-wrapper {
      display: flex;
    }

    .third-party-list-wrapper {
      padding-right: 30px;
      border-right: 1px solid @bg-1;

      ul.third-party-list {
        width: 280px;

        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 50px;
          padding: 0 6px;
          margin: 4px 0;
          border-radius: 4px;
          overflow: hidden;
          font-size: 14px;

          .action {
            visibility: hidden;

            &-activate {
              color: @primary-color;
            }

            &-deactivate {
              color: #ED4013;
            }
          }

          .status {
            display: inline-flex;
            visibility: hidden;
            font-size: 12px;

            &-no::after,
            &-ok::after {
              padding: 0 4px;
              border-radius: 2px;
            }

            &-no::after {
              background-color: @bg-4;
              content: '未激活';
            }

            &-ok::after {
              padding: 0 4px;
              background-color: #0E6237;
              content: '已激活';
            }
          }

          &:hover,
          &.active {
            background-color: @bg-3;

            .status,
            .action {
              visibility: visible;
            }
          }

          .icon {
            margin-right: 6px;
          }
          .name {}
        }
      }
    }

    .form-wrapper {
      display: flex;
      flex-direction: column;

      .form {
        width: 738px;
      }

      .btns {
        display: flex;
        justify-content: center;

        .submit-btn {
          margin-right: 12px;
        }
      }
    }

    .no-data {
      display: flex;
      flex: 1 0 auto;
      flex-direction: column;
      align-items: center;

      &-icon {
        width: 134px;
        height: 134px;
      }

      &-info {
        margin-top: 48px;
        font-size: 14px;
        color: @color-2;
      }

      &-help {
        margin-top: 12px;
        font-size: 12px;
        color: @color-5;
      }
    }
  }
}
